<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="分配编号">
        <el-input v-model="form.allocationNo" disabled />
      </el-form-item>
      <el-form-item label="捐赠物资" prop="donationId">
        <el-select v-model="form.donationId" placeholder="请选择捐赠物资" @change="handleDonationChange" disabled>
          <el-option
            v-for="item in donationOptions"
            :key="item.donationId"
            :label="item.donationName"
            :value="item.donationId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="需求物资" prop="demandId">
        <el-select v-model="form.demandId" placeholder="请选择需求物资" @change="handleDemandChange" disabled>
          <el-option
            v-for="item in demandOptions"
            :key="item.demandId"
            :label="item.demandName"
            :value="item.demandId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分配数量" prop="quantity">
        <el-input-number v-model="form.quantity" :min="1" :max="maxQuantity" />
        <span class="unit-text">{{ unit }}</span>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAidAllocation, updateAidAllocation } from "@/api/aid/allocation";
import { listAidDonation } from "@/api/aid/donation";
import { listAidDemand } from "@/api/aid/demand";

export default {
  name: "EditAllocation",
  data() {
    return {
      // 表单参数
      form: {
        allocationId: null,
        allocationNo: null,
        donationId: null,
        demandId: null,
        quantity: 1,
        remark: null
      },
      // 表单校验
      rules: {
        quantity: [
          { required: true, message: "请输入分配数量", trigger: "blur" }
        ]
      },
      // 捐赠物资选项
      donationOptions: [],
      // 需求物资选项
      demandOptions: [],
      // 最大可分配数量
      maxQuantity: 999999,
      // 单位
      unit: ''
    };
  },
  created() {
    const allocationId = this.$route.query.allocationId;
    this.getInfo(allocationId);
    this.getDonationOptions();
    this.getDemandOptions();
  },
  methods: {
    /** 获取详细信息 */
    getInfo(allocationId) {
      getAidAllocation(allocationId).then(response => {
        this.form = response.data;
        this.handleDonationChange(this.form.donationId);
        this.handleDemandChange(this.form.demandId);
      });
    },
    /** 获取捐赠物资选项 */
    getDonationOptions() {
      listAidDonation().then(response => {
        this.donationOptions = response.rows;
      });
    },
    /** 获取需求物资选项 */
    getDemandOptions() {
      listAidDemand().then(response => {
        this.demandOptions = response.rows;
      });
    },
    /** 捐赠物资选择框变化 */
    handleDonationChange(val) {
      const donation = this.donationOptions.find(item => item.donationId === val);
      if (donation) {
        this.maxQuantity = donation.remainQuantity + this.form.quantity;
        this.unit = donation.unit;
      }
    },
    /** 需求物资选择框变化 */
    handleDemandChange(val) {
      const demand = this.demandOptions.find(item => item.demandId === val);
      if (demand) {
        this.maxQuantity = Math.min(this.maxQuantity, demand.remainQuantity + this.form.quantity);
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateAidAllocation(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.cancel();
          });
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$router.push({ path: "/aid/allocation" });
    }
  }
};
</script>

<style scoped>
.unit-text {
  margin-left: 10px;
}
</style> 